<template>
    <section>
        <el-card>
            <el-table
                    :data="k8sClusterRoles"
                    stripe
                    style="width: 100%"
                    :row-style="rowStyle"
            >


                <el-table-column
                        prop="name"
                        label="名称"
                        width="180">
                    <template slot-scope="scope">
                        <el-link   type="primary" :underline="false" icon="el-icon-office-building">{{scope.row.name}}</el-link>
                    </template>
                </el-table-column>



                <el-table-column
                        prop="kind"
                        label="角色类型"
                        width="180">

                </el-table-column>
                <!--<el-table-column-->
                        <!--prop=""-->
                        <!--label="访问权限">-->
                    <!--<template slot-scope="scope">-->
                        <!--<div v-for="(tree,index) in scope.row.trees">-->
                            <!--<el-tag size="mini">rule-{{index}}</el-tag>-->
                            <!--<el-tree :data="tree" props="{children: 'children',label: 'label'}" ></el-tree>-->
                        <!--</div>-->

                    <!--</template>-->


                <!--</el-table-column>-->
                <el-table-column
                        prop=""
                        label="访问权限">
                    <template slot-scope="scope">

                            <el-tree :data="scope.row.finallytrees" props="{children: 'children',label: 'label'}" style="color: blue;"></el-tree>


                    </template>


                </el-table-column>


                <el-table-column
                        prop="createdate"
                        label="创建时间">
                </el-table-column>
            </el-table>
        </el-card>
    </section>
</template>

<script>
    import { k8sClusterRoleData } from '../../api/api'
    export default {
        data() {
            return {
                k8sClusterRoles: [],
            }
        },
        methods: {
            rowStyle({ row, rowIndex}){
                return "height:50px;"
            },
            getK8sClusterRoleData(){
                let self = this
                k8sClusterRoleData().then((res) => {
                    console.log(res)
                    self.k8sClusterRoles = res.clusterroles

                })

            },
        },
        mounted: function () {
            console.log("debug ehrer")
            this.getK8sClusterRoleData()

        }
    }
</script>